<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>天算AI - 数字名片</title>
  <style>
    /* --- 基本重置和页面设置 --- */
    body {
      background-color: #f0f0f0; /* 预览背景 */
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      padding: 20px;
      box-sizing: border-box;
      font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      -webkit-font-smoothing: antialiased; /* 字体抗锯齿 */
      -moz-osx-font-smoothing: grayscale;
    }

    /* --- 卡片容器 --- */
    .card-wrapper {
      width: 320px; /* 固定宽度 */
      border-radius: 15px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      background-color: #000; /* 后备背景 */
    }

    /* --- 卡片背景层 --- */
    .vertical-card {
      width: 100%;
      position: relative;
      /* 确保这个路径相对于你的 HTML 文件是正确的 */
      background-image: url('assets/images/circuit_background.jpg');
      background-size: cover;
      background-position: center;
    }

    /* --- 内容遮罩层 --- */
    .content-overlay {
      background-color: rgba(0, 5, 15, 0.75); /* 半透明黑色遮罩 */
      color: #ffffff;
      padding: 25px 25px 30px 25px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      text-align: center;
      min-height: 580px; /* 可以根据内容调整最小高度 */
    }

    /* --- Logo 区域 --- */
    .logo-area {
      margin-bottom: 15px;
    }

    .logo-area img {
      width: 60px; /* Logo 尺寸保持 60px */
      height: 60px;
      border-radius: 50%; /* 保持图片是圆的 */
      background-color: rgba(255, 255, 255, 0.1); /* 可选：图片加载前的底色 */
      margin: 0 auto;
      object-fit: cover;
      display: block;
      /* === 修改：减小白圈厚度，保持外部阴影 === */
      /* 原: box-shadow: 0 0 0 5px white, 0 1px 3px rgba(0, 0, 0, 0.5); */
      box-shadow: 0 0 0 3px white, /* 将白圈改回 3px 厚 */
                  0 1px 3px rgba(0, 0, 0, 0.5); /* 保持外部阴影以增强对比 */
    }

    /* --- 头部信息 --- */
    .header-info h1 {
      font-size: 1.6em;
      margin: 0 0 5px;
      font-weight: 600;
    }

    .header-info .english-name {
      font-size: 0.9em;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 15px;
      letter-spacing: 0.5px;
    }

    /* --- 角色标签 --- */
    .roles span {
      display: inline-block;
      background-color: rgba(76, 175, 80, 0.7);
      color: #fff;
      padding: 6px 12px;
      font-size: 0.8em;
      margin: 5px 3px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }
    .roles span:hover {
       background-color: rgba(76, 175, 80, 0.9);
    }

    .roles span:last-child {
      background-color: rgba(63, 81, 181, 0.7);
    }
    .roles span:last-child:hover {
      background-color: rgba(63, 81, 181, 0.9);
    }

    /* --- 服务描述 --- */
    .service-desc {
      font-size: 0.9em;
      color: rgba(255, 255, 255, 0.9);
      margin-top: 15px;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    /* --- 数字资产区域 --- */
    .assets-section {
      background-color: rgba(0, 0, 0, 0.35);
      padding: 15px 20px;
      text-align: left;
      margin-bottom: 20px;
      border-radius: 8px;
    }

    .assets-section h2 {
      font-size: 1.1em;
      margin: 0 0 15px;
      display: flex;
      align-items: center;
      color: #81d4fa;
    }

    .vertical-bar {
      display: inline-block;
      width: 4px;
      height: 1.1em;
      background-color: #29b6f6;
      margin-right: 10px;
      border-radius: 2px;
    }

    .assets-section ul {
      list-style: none;
      padding-left: 5px;
      margin: 0;
    }

    .assets-section li {
      font-size: 0.85em;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 8px;
      display: flex;
      align-items: flex-start;
    }

    .assets-section li::before {
      content: '•';
      color: #4fc3f7;
      font-size: 1.2em;
      margin-right: 10px;
      line-height: 1;
      flex-shrink: 0;
    }

    /* --- 联系信息 --- */
    .contact-info {
      margin-top: auto; /* 保持推到底部 */
      text-align: center;
      font-size: 0.9em;
      padding-top: 20px; /* 保持与上方分割线的距离 */
      border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .contact-info p {
      margin: 10px 0;
      color: rgba(255, 255, 255, 0.9);
    }

    .contact-info .label {
      font-weight: bold;
      color: #fff;
      margin-right: 5px;
    }

    .contact-info a {
      color: #81d4fa;
      text-decoration: none;
      word-break: break-all;
      transition: color 0.3s ease;
    }

    .contact-info a:hover {
      text-decoration: underline;
      color: #a6eaff;
    }

    .contact-info a[href^="tel:"] {
      white-space: nowrap;
    }

  </style>
</head>
<body>

  <!-- === HTML 部分保持不变 === -->
  <div class="card-wrapper" id="captureArea">
    <div class="vertical-card">
      <div class="content-overlay">
        <div class="logo-area">
          <!-- 确保这个路径相对于你的 HTML 文件是正确的 -->
          <img src="assets/images/tian_suan_logo.jpg" alt="天算AI Logo" class="logo"/>
        </div>
        <div class="header-info">
          <h1>天算AI科技研发实验室</h1>
          <p class="english-name">(Natural Algorithm AI R&D Lab)</p>
          <div class="roles">
            <span>AI科技博主</span>
            <span>AI科技研发</span>
          </div>
          <p class="service-desc">科技前沿最新AI资讯影视化报道</p>
        </div>
        <div class="assets-section">
          <h2><span class="vertical-bar"></span>天算AI数字资产</h2>
          <ul>
            <li>5万字原创诗文</li>
            <li>7千分钟原创交响乐</li>
            <li>9千部原创AI短视频</li>
            <li>16项原创AI科技产品</li>
            <li>7个天算AI大语言模型</li>
          </ul>
        </div>
        <div class="contact-info">
          <!-- 链接仍然是 jinv2 -->
          <p><span class="label">天算AI博客:</span> <a href="https://jinv2.github.io/" target="_blank" rel="noopener noreferrer">https://jinv2.github.io/</a></p>
          <p><span class="label">联系方式:</span> 手机/微信: <a href="tel:15632151615">15632151615</a></p>
        </div>
      </div>
    </div>
  </div>

</body>
</html>
